import { View, Map, Image } from "@tarojs/components";
import { AtButton, AtMessage } from "taro-ui";
import { useState } from "react";
import Taro, { useRouter, useDidShow } from "@tarojs/taro";

import { adjustPointApi, getProjectInfoApi } from "../../utils/api";
import { btq, qtb } from "../../utils/to";
import { useSelector, useDispatch } from "react-redux";

const Index = () => {
  const router = useRouter();

  const satellite = useSelector(state => state.yq.satellite);
  const level = useSelector(state => state.yq.level);
  const lon2 = useSelector(state => state.yq.lon2);
  const lat2 = useSelector(state => state.yq.lat2);
  const dispatch = useDispatch();

  const [lon, setLon] = useState(0);
  const [lat, setLat] = useState(0);
  const [lon_center, set_lon_center] = useState(0);
  const [lat_center, set_lat_center] = useState(0);

  useDidShow(() => {
    if (+router.params.lon !== 0) {
      const arr = btq(router.params.lon / 1000000, router.params.lat / 1000000);
      setLon(arr[0]);
      set_lon_center(lon2 || arr[0]);
      setLat(arr[1]);
      set_lat_center(lat2 || arr[1]);
    } else {
      if (lon2) {
        set_lon_center(lon2);
        set_lat_center(lat2);
      } else {
        getProjectInfoApi({
          project_id: router.params.pid
        }).then(res => {
          if (res.res === 0) {
            const arr = btq(
              res.record.longitude / 1000000,
              res.record.latitude / 1000000
            );
            set_lon_center(arr[0]);
            set_lat_center(arr[1]);
          } else {
            Taro.atMessage({
              message: res.msg,
              type: "warning"
            });
          }
        });
      }
    }
  });

  const fn = () => {
    setLon(lon => +lon - 0.00001);
  };

  const fn2 = () => {
    setLon(lon => +lon + 0.00001);
  };

  const fn3 = () => {
    setLat(lat => +lat + 0.00001);
  };

  const fn4 = () => {
    setLat(lat => +lat - 0.00001);
  };

  const mapClick = e => {
    setLon(+e.detail.longitude);
    setLat(+e.detail.latitude);
  };

  const onSubmit = async () => {
    dispatch({ type: "changeMap", lon: lon, lat: lat });
    const arr = qtb(lon, lat);
    const res = await adjustPointApi({
      point_id: router.params.id,
      longitude: arr[0],
      latitude: arr[1]
    });
    if (res.res === 0) {
      Taro.atMessage({
        message: "修改成功",
        type: "success"
      });
      Taro.navigateBack();
    } else {
      Taro.atMessage({
        message: res.msg,
        type: "warning"
      });
    }
  };

  const changeSatellite = () => {
    dispatch({ type: "changeSatellite" });
  };

  const regionChange = e => {
    if (e.detail.scale) {
      dispatch({ type: "changeScale", scale: e.detail.scale });
    }
  };

  return (
    <View className="lonlat">
      <View className="mapwrap">
        <Map
          longitude={lon_center}
          latitude={lat_center}
          style={{ width: "100%", height: 300 }}
          scale={level || 16}
          markers={[
            {
              longitude: lon,
              latitude: lat
            }
          ]}
          showScale={true}
          onTap={mapClick}
          enable-satellite={satellite}
          onRegionChange={regionChange}
        ></Map>
        <View className="controls item1" onClick={fn}>
          <Image
            src={require("../../assets/images/left.png")}
            style="width: 40px;height: 40px;"
          />
        </View>
        <View className="controls item2" onClick={fn2}>
          <Image
            src={require("../../assets/images/right.png")}
            style="width: 40px;height: 40px;"
          />
        </View>
        <View className="controls item3" onClick={fn3}>
          <Image
            src={require("../../assets/images/top.png")}
            style="width: 40px;height: 40px;"
          />
        </View>
        <View className="controls item4" onClick={fn4}>
          <Image
            src={require("../../assets/images/bottom.png")}
            style="width: 40px;height: 40px;"
          />
        </View>
      </View>
      <View className="button-wrap">
        <View className="button-item" onClick={changeSatellite}>
          {satellite ? "切换标准地图" : "切换卫星地图"}
        </View>
      </View>
      <AtButton type="primary" onClick={onSubmit}>
        提交
      </AtButton>
      <AtMessage />
    </View>
  );
};

export default Index;
